<template>
  <view>
    <view class="avact">
      <button :plain="true" @click="imgs"><image src="/static/lzl/user_icon_xiugai@2x.png" style="width: 48rpx;height: 48rpx;" mode="widthFix"></image></button>
      <image :src="img || '/static/lzl/user_icon_photo@2x.png'" style="width: 200rpx;height: 200rpx;border-radius: 100rpx;" mode=""></image>
    </view>
    <view class="" style="padding: 0 20rpx;margin: 50rpx 0;">
      <view class="" style="display: flex;width: 686rpx;height: 68rpx;border-bottom: 2rpx solid #f7f7f7;padding: 20rpx 0rpx;align-items: center;margin-bottom: 50rpx;">
        <view class="" style="font-size: 32rpx;color: #0A0A09;font-weight: 500;margin-right: 50rpx;">姓名</view>
        <view class=""><input v-model="userinfo.nickname" style="margin-left: 50rpx; width: 500rpx; " type="text" placeholder="收货人" /></view>
      </view>
      <view class="" style="display: flex;width: 686rpx;height: 68rpx;border-bottom: 2rpx solid #f7f7f7;padding: 20rpx 0rpx;align-items: center;margin-bottom: 50rpx;">
        <view class="" style="font-size: 32rpx;color: #0A0A09;font-weight: 500;margin-right: 50rpx;">手机</view>
        <view class=""><input v-model="userinfo.mobile" style="margin-left: 50rpx; width: 500rpx; " type="text" placeholder="请输入手机号" /></view>
      </view>
      <view class="" style="display: flex;width: 686rpx;height: 68rpx;border-bottom: 2rpx solid #f7f7f7;padding: 20rpx 0rpx;align-items: center;margin-bottom: 50rpx;">
        <view class="" style="font-size: 32rpx;color: #0A0A09;font-weight: 500;margin-right: 50rpx;">性别</view>
        <view class=""><input v-model="sex" disabled @click="showSex = true" style="margin-left: 50rpx; width: 500rpx; " type="text" placeholder="请选择性别" /></view>
      </view>
      <view class="" style="display: flex;width: 686rpx;height: 68rpx;border-bottom: 2rpx solid #f7f7f7;padding: 20rpx 0rpx;align-items: center;margin-bottom: 50rpx;">
        <view class="" style="font-size: 32rpx;color: #0A0A09;font-weight: 500;margin-right: 50rpx;">生日</view>
        <view class="">
          <input v-model="userinfo.birthday" disabled @click="showBrider = true" style="margin-left: 50rpx; width: 500rpx; " type="text" placeholder="年/月/日" />
        </view>
      </view>
    </view>
    <view class="btn" @click="subMit">保存</view>
    <!-- 下面的piick -->
    <u-picker v-model="showSex" range-key="name" :range="selector" @confirm="confirmSex" mode="selector"></u-picker>
    <u-picker v-model="showBrider" @confirm="confirmBrider" mode="time"></u-picker>
  </view>
</template>

<script>
import { user, profile } from '@/api/api.js';
export default {
  data() {
    return {
      sex: '',
      showSex: false,
      showBrider: false,
      selector: [
        {
          name: '男',
          id: 1
        },
        {
          name: '女',
          id: 2
        }
      ],
      img: '',
      baseUrl: this.$baseUrl,
      userFo: {},
      avatar: '',
      userinfo: {
        nickname: '',
        avatar: '',
        mobile: '',
        birthday: '',
        gender: ''
      }
    };
  },
  onShow() {
    this.init();
  },
  methods: {
    //点击保存个人信息
    async subMit() {
      let n = await profile(this.userinfo);
      this.init();
      this.$msg('修改成功！');
      setTimeout(() => {
        uni.navigateBack();
      }, 500);
    },
    //回显信息
    async init() {
      let res = await user();
      console.log(res.data);
      this.img = res.data.avatar;
      this.userinfo.mobile = res.data.mobile;
      this.userinfo.nickname = res.data.nickname;
      this.userinfo.gender = res.data.gender;
      this.userinfo.birthday = res.data.birthday;
      this.userFo = res.data;
      if (res.data.gender == 1) {
        this.sex = '男';
      } else {
        this.sex = '女';
      }
    },
    // 选择年月日
    confirmBrider(e) {
      let n = e.year + '-' + e.month + '-' + e.day;
      this.userinfo.birthday = n;
    },
    // 选择性别
    confirmSex(e) {
      this.userinfo.gender = this.selector[e[0]].id;
      if (this.selector[e[0]].id == 1) {
        this.sex = '男';
      } else {
        this.sex = '女';
      }
    },
    // 上传头像
    imgs() {
      uni.chooseImage({
        count: 1, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: res => {
          var tempFilePaths = res.tempFilePaths;
          uni.uploadFile({
            url: this.baseUrl + '/api/common/upload',
            filePath: tempFilePaths[0],
            name: 'file',
            header: {
              token: uni.getStorageSync('token'),
              'Content-Type': 'multipart/form-data'
            },
            formData: {
              user: 'test'
            },
            success: async res => {
              console.log(res, '111111');
              if (res.statusCode == 200) {
                res.data = JSON.parse(res.data);
                console.log(res.data);
                if (res.data.code == 1) {
                  console.log(res.data.data.url);
                  this.img = this.baseUrl + res.data.data.url;
                  // 图片路径
                  this.userinfo.avatar = res.data.data.url;
                  // let n = await this.$api.upload({ file: res.data.fullurl });
                  // console.log(n, '上传后');
                }
              }
            },
            fail(res) {
              showToast('图片上传失败');
            }
          });
        }
      });
    }
  }
};
</script>

<style lang="scss">
* {
  box-sizing: border-box;
}
.btn {
  margin: 50rpx auto;
  width: 686rpx;
  height: 98rpx;
  line-height: 98rpx;
  text-align: center;
  background: linear-gradient(151deg, #d4c390 0%, #ccb983 53%, #d3c086 100%);
  border-radius: 4rpx 4rpx 4rpx 4rpx;
  opacity: 1;
  font-size: 32rpx;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
}
.avact {
  position: relative;
  margin: 0 auto;
  margin-top: 88rpx;
  width: 200rpx;
  height: 200rpx;
  button {
    border: none;
    // width: 48rpx;
    // height: 48rpx;
    position: absolute;
    bottom: -30rpx;
    right: -20rpx;
    z-index: 1;
  }
}
</style>
